<template>
	<div>
		<navBar title="充值"></navBar>
		<view class="header" :style="{'margin-top': navHeight+'px'}">
			<view class="bg">
				<view class="wallet-info">
					<view>
						<view class="price">钱包余额</view>
						<view class="price-num">{{totalMoney}}</view>
					</view>
				</view>
			</view>
		</view>
		<view class="recharge-price">
			<view class="charge-tlt">充值金额</view>
			<view class="section-1">
				<view :class="['charge-item',item.id==selectItem.id?'select-charge-item':'']"
					v-for="(item,index) in dataList" :key="item.id" @click.stop="select_Click(item)">
					<view class="charge-price">{{item.money}}元</view>
					<view class="sub" :style="{'color':item.id==selectItem.id?'#FFFFFF':'#999999'}">{{item.showText}}
					</view>
					<view class="tip" v-if="item.tips?true:false">{{item.tips}}</view>
				</view>
			</view>
			<view class="charge-tlt">选择支付方式</view>
		</view>
		<view>
			<!-- #ifdef MP-WEIXIN -->
			<view class="pay-item" @click.stop="payMethod=0">
				<image class="pay-icon" src="https://oss.jxhecong.com/v2/image/wallet_wx@2x.png"></image>
				<view class="pay-content">
					<view class="pay-tlt">微信支付</view>
					<image class="pay-status" :src="payMethod==0?'https://oss.jxhecong.com/v2/image/xuanze-active.png':'https://oss.jxhecong.com/v2/image/radio_on@2x.png'"></image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef MP-ALIPAY -->
			<view class="pay-item" @click.stop="payMethod=1">
				<image class="pay-icon" src="https://oss.jxhecong.com/image/20230319162410730.png"></image>
				<view class="pay-content">
					<view class="pay-tlt">支付宝支付</view>
					<image class="pay-status" :src="payMethod==1?'https://oss.jxhecong.com/v2/image/xuanze-active.png':'https://oss.jxhecong.com/v2/image/radio_on@2x.png'"></image>
				</view>
			</view>
			<!-- #endif -->
			<!-- #ifdef APP-PLUS || APP-PLUS-NVUE -->
			<view class="pay-item" @click.stop="payMethod=1">
				<image class="pay-icon" src="https://oss.jxhecong.com/v2/image/icon_zhifubao@2x.png"></image>
				<view class="pay-content">
					<view class="pay-tlt">支付宝支付</view>
					<image class="pay-status" :src="payMethod==1?'https://oss.jxhecong.com/v2/image/xuanze-active.png':'https://oss.jxhecong.com/v2/image/radio_on@2x.png'"></image>
				</view>
			</view>
			<!-- #endif -->
		</view>
		<view class="rechargeBtn" @click="pay_Click">立即充值{{selectItem.money}}{{selectItem.money?'元':''}}</view>
		<!-- <view class="protocol">
			<view>充值即表明同意</view>
			<view style="color: #00C3A6;">《充值协议》</view>
		</view> -->
	</div>
</template>

<script>
	var globalData = getApp({
		allowDefault: true
	}).globalData
	import * as walletApi from '../../api/wallet/index.js'
	import * as userApi from '../../api/user/index.js'
	import * as payApi from '@/api/pay/index.js'
	import navBar from '../components/navBar.vue'
	export default {
		components:{navBar},
		data() {
			return {
				navHeight:0,
				dataList: [],
				totalMoney: '',
				payMethod:0,
				selectItem: {
					id: '',
					money: ''
				}
			}
		},
		onLoad() {
			this.navHeight = globalData.titleHeight;
			this.offNavTop = -globalData.titleHeight
			this.navInfoTop = globalData.titleHeight + 20
			this.getWalletConfig()
			this.getUserInfo()
			// #ifdef MP-WEIXIN
			this.payMethod=0
			// #endif
			// #ifdef MP-ALIPAY
			this.payMethod=1
			// #endif
		},

		onShow() {
			this.getWalletConfig()
			this.getUserInfo()
		},

		methods: {
			getWalletConfig() {
				walletApi.getWalletConfig().then((res)=>{
					this.dataList = res.data
					this.dataList.forEach(e => {
						if (e.defaultDisplay == 1) {
							this.selectItem.id = e.id
						}
					})
				}).catch((errMsg)=>{
					
				})
			},

			// 获取用户信息
			getUserInfo() {
				userApi.getUserInfo().then((res)=>{
					let jsonStr = JSON.stringify(res.data)
					uni.setStorageSync('userInfo', jsonStr)
					this.totalMoney = res.data.totalMoney
				})
			},

			select_Click(item) {
				this.selectItem = item
			},

			// 支付
			pay_Click() {
				if (!this.selectItem.id) {
					uni.showToast({
						title: '请选择金额',
						icon: 'none'
					})
					return
				}
				uni.showLoading({
					title:'正在加载',
					mask:true
				})
				payApi.getPayOrder(this.payMethod==0?1:0,this.selectItem.id).then((res)=>{
					console.log(res)
					//#ifdef APP-PLUS || APP-PLUS-NVUE
					if(this.payMethod==0){
						this.appPay('wxpay',res.data)
					}
					else{
						this.appPay('alipay',res.data.aliPay)
					}
					// #endif
					// #ifdef MP-WEIXIN
					this.wxPay(res.data)
					// #endif
					// #ifdef MP-ALIPAY
					this.appPay('alipay',res.data.trade_no)
					// #endif
					
				}).catch((errMsg)=>{
					uni.hideLoading()
					uni.showToast({
						title:errMsg,
						icon:'none'
					})
				})
			},
			appPay(provider,data){
				payApi.payRequest(provider,data).then((res)=>{
					uni.hideLoading()
					if (res && res.resultCode === '9000') {
					   uni.showToast({
					   	title:'支付成功',
					   	icon:'success'
					   })
					   setTimeout(()=>{
					   	uni.navigateTo({
					   		url:'/pages/wallet/cardRechargeResult?type=1'
					   	})
					   },1500)                     
					} else {
						uni.showToast({
							title:'支付失败',
							icon:'none'
						})
					}
				}).catch(()=>{
					uni.hideLoading()
					uni.showToast({
						title:'支付失败',
						icon:'none'
					})
				})
			},
			
			wxPay(data){
				payApi.wxPayRequst(data).then(()=>{
					uni.showToast({
						title:'支付成功',
						icon:'success'
					})
					setTimeout(()=>{
						uni.navigateTo({
							url:'/pages/wallet/cardRechargeResult?type=1'
						})
					},1500)
				}).catch((errorMsg)=>{
					uni.showToast({
						title:'支付失败',
						icon:"none"
					})
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.header {
		width: 100%;
		height: 150px;
	}

	.header .bg {
		position: relative;
		width: 100%;
		height: 100%;
		background-color: #6ABF6C;
	}


	/*充值金额*/
	.recharge-price {
		padding: 15px 0px 0px 15px;
	}

	.charge-tlt {
		color: #333333;
		font-size: 16px;
		font-weight: bold;
		margin-bottom: 15px;
	}

	.recharge-price .section-1 {
		display: flex;
		flex-direction: row;
		flex-wrap: wrap;
		align-items: center;
		justify-content: flex-start;
		// margin-bottom: 15px;
	}

	.charge-item {
		// flex: 1;
		position: relative;
		height: 63px;
		width: calc(50% - 18px);
		color: #333333;
		font-size: 16px;
		margin-right: 15px;
		margin-bottom: 15px;
		border-radius: 9px;
		border: 1px solid #EAEAEA;
		background-color: white;
		text-align: center;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
	}

	.select-charge-item {
		color: white;
		border: none;
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
	}

	.tip {
		position: absolute;
		top: -15rpx;
		right: -10px;
		width: 57px;
		height: 15px;
		line-height: 15px;
		background: linear-gradient(135deg, #FB8B74 0%, #FE2C4B 100%);
		border-radius: 8px 2px 8px 8px;
		color: white;
		font-size: 9px;
		text-align: center;
	}

	.charge-item .sub {
		font-size: 12px;
		margin-top: 4px;
		color: #999999;
	}

	/*支付方式*/
	.pay-item {
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		padding: 0px 15px;
		height: 57px;
		background-color: white;
	}

	.pay-item .pay-content {
		border-bottom-color: #F8F8F8;
		border-bottom-width: 1px;
		display: flex;
		justify-content: space-between;
		flex-direction: row;
		align-items: center;
		height: 57px;
		margin-left: 9px;
		flex: 1;
	}

	.pay-item .pay-icon {
		width: 21px;
		height: 21px;
	}

	.pay-item .pay-tlt {
		color: #333333;
		font-size: 14px;
		flex: 1;
	}

	.pay-item .pay-status {
		width: 18px;
		height: 18px;
	}

	/*充值按钮*/
	.rechargeBtn {
		color: white;
		margin-top: 30px;
		height: 45px;
		line-height: 45px;
		text-align: center;
		font-size: 16px;
		font-weight: 16px;
		background: #6ABF6C;
		box-shadow: 0px 1px 2px 0px rgba(8, 139, 120, 0.3);
		border-radius: 45px;
		margin-left: 15px;
		margin-right: 15px;
	}

	.protocol {
		position: fixed;
		bottom: 20px;
		left: 20px;
		right: 20px;
		height: 20px;
		display: flex;
		flex-direction: row;
		align-items: center;
		justify-content: center;
		color: #999999;
		font-size: 12px;
		padding: 15px 0px;
	}
	
	.wallet-info{
		position: absolute;
		z-index: 0;
		bottom: 0rpx;
		left: 30rpx;
		right: 30rpx;
		background: linear-gradient(124deg, #FDF0D3 0%, #E9CE93 100%);
		box-shadow: 0px 2px 5px 0px rgba(71, 55, 24, 0.1);
		border-top-left-radius: 18rpx;
		border-top-right-radius: 18rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
		height: 180rpx;
		padding: 30rpx;
	}
	.wallet-info .price{
		color: #674732;
		font-size: 28rpx;
	}
	.wallet-info .price-num{
		color: #674732;
		font-size: 60rpx;
		margin-top: 30rpx;
	}
</style>
